<template>
  <div>
    <div v-for="menu in userMenu" :key="menu._id">
      <el-sub-menu 
        v-if="menu.children && 
        menu.children.length &&
        menu.children[0].menuType == 1"
        :index="menu.path"
      >
        <template #title>
          <i :class="menu.icon"></i>
          <span>{{ menu.menuName }}</span>
        </template> 
        <tree-menu :userMenu="menu.children"></tree-menu>
      </el-sub-menu>
      <el-menu-item v-else-if="menu.menuType == 1" :index="menu.path">{{ menu.menuName }}</el-menu-item>
    </div>
  </div>   
</template>
<script>
export default {
  name: 'TreeMenu',
  props: {
    userMenu: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>